<!DOCTYPE html>
<html>
  <head>
	<link rel="stylesheet" href="bootstrap.min.css">
	<link rel="stylesheet" href="dialpad.css">
	<link rel="stylesheet" href="candybar.css">

    <script src="jquery_1_4_2.js"></script>
	<script src="md5.js"></script>
	<script src="base64.js"></script>
	<script src="strophe.js"></script>
    <script src="strophe-openfire.js"></script>
    <script src="rayo-plugin.js"></script>

	<script src="candybar.js"></script>
	<script src="att.phonenumber.js"></script>
	<script src="dialpad.js"></script>
    <script>

	var avatar = 'unknown.jpg';
	var domain = "81.201.82.25";
	var prefix = "sip:";
	var ringtone;
	var username = null;
	var password = null;
	var jid = window.location.hostname;
	var sipHandset = null;
	var rtmpIframe = null;

	window.dialer = new Dialpad({
		onPress: function (key) {
			//console.log('a key was pressed', key);

			if (window.candybar.call) window.candybar.call.digit(key);
		},
		onCallableNumber: function (number) {
			console.log('we have a number that seems callable', number);
			//makeCall(number);
		},
		onHide: function () {
			//console.log('removed it');
		},
		onHangup: function (number) {

			window.candybar.call.hangup();
		},

		onCall: function (number) {

			if (window.dialer.getCallLabel() == "Call") {
				//console.log('The call button was pressed', number);
				makeCall(number);

			} else if (window.dialer.getCallLabel() == "Hangup") {
				window.candybar.call.hangup();

			} else if (window.dialer.getCallLabel() == "Answer") {
				window.candybar.call.answer();

			} else if (window.dialer.getCallLabel() == "Join") {
				window.candybar.call.join();

			} else if (window.dialer.getCallLabel() == "Leave") {
				window.candybar.call.leave();

			} else if (window.dialer.getCallLabel() == "Unhold") {
				window.candybar.call.join();

			} else if (window.dialer.getCallLabel() == "Unmute") {
				window.candybar.call.mute(false);

			} else if (window.dialer.getCallLabel() == "Private") {
				window.candybar.call.private();

			} else if (window.dialer.getCallLabel() == "Public") {
				window.candybar.call.private();

			} else {
				console.error('bad call state');
			}
		}
	});

	window.candybar = new CandyBar();

    $(document).ready(function()
    {
		document.body.insertBefore(window.dialer.render(), document.body.firstChild);

		window.candybar.render();
		window.candybar.call = null;

		if (urlParam("prefix")) prefix = urlParam("prefix");
		if (urlParam("domain")) domain = urlParam("domain");
		if (urlParam("username")) username = urlParam("username");
		if (urlParam("password")) password = urlParam("password");

		if (urlParam("handset"))
		{
			sipHandset = urlParam("handset");
		}

		if (domain == "81.201.82.25" && prefix == "sip:") prefix = "sip:883510";
		if (prefix == "tel:") domain = "";
		if (prefix == "xmpp:") domain = window.location.hostname;

		var iNum = urlParam("inum");

		if (!iNum)
		{
			iNum = Math.random().toString(36).substr(2,9);
		}

		if (username && password)
		{
			iNum = username;
			jid = username + "@" + window.location.hostname
		}

		window.connection = new Openfire.Connection(window.location.protocol + '//' + window.location.host + '/http-bind/');
		window.connection.resource = iNum;

		window.connection.connect(jid, password, function (status)
		{
			//console.log("XMPPConnection.connect");
			//console.log(status);

			if (status === Strophe.Status.CONNECTED)
			{
				$("#status").html("Ready");
				window.connection.send($pres());

				$(window).unload( function() {
					window.connection.disconnect();
				});

				setPhone();

				var destination = urlParam("destination");

				if (destination)
				{
					makeCall(destination);
				}
			}
		});
    })


   function setPhone()
   {
		//console.log("setPhone()");

		if (window.connection)
		{
			window.connection.rayo.phone(
			{
				codec_name: document.getElementById("codec").value,
				stereo_pan: "0",
				sip_handset: sipHandset,

				offHook: function() {
					$("#status").html("Off Hook");
				},

				onHook: function() {
					$("#status").html("On Hook");
				},

				offSpeaking: function() {
					$("#status").html("Stopped Speaking");
				},

				onSpeaking: function() {
					$("#status").html("Started Speaking");
				},

				onAccept: function(call) {

					window.candybar.call = call;
				},

				onOffer: function(call, headers) {
					//console.log('onOffer ' + call.from);
					//console.log(headers);

					if (window.candybar.call == null)	// ignore when user has active call
					{
						var cli = headers.caller_name ? headers.caller_name : call.from;

						window.candybar.setUser({
							name: cli,
							number: cli,
							picUrl: 'unknown.jpg'
						});

						window.candybar.call = call;
						window.candybar.setState('incoming');
						window.dialer.setCallLabel('Answer');
					}

					startTone("Diggztone_Vibe");
				},

				onEnd: function(callId, headers) {
					//console.log('onEnd ' + callId);
					//console.log(headers);

					window.candybar.endGently();
					window.candybar.call = null;

					window.dialer.setCallLabel('Call');
					stopTone();
					if (rtmpIframe) rtmpIframe.src = "about:blank"
				},

				onAnswer: function(callId, headers) {
					//console.log('onAnswer ' + callId);
					//console.log(headers);

					window.candybar.setState('active');
					window.dialer.setCallLabel('Hangup');
					stopTone();
				},

				onBusy: function(call, headers) {
					//console.log('onBusy ' + call.id);
					//console.log(headers);

					window.candybar.setState('inactive');

					var cli = headers.caller_name ? headers.caller_name : call.from;

					window.candybar.setUser({
						name: cli,
						number: cli,
						picUrl: 'unknown.jpg'
					});

					window.candybar.call = call;
					window.candybar.setState('busy');
					window.dialer.setCallLabel('Join');
					stopTone();
				},

				onHold: function(callId) {
					//console.log('onHold ' + callId);

					window.candybar.setState('held');
					window.dialer.setCallLabel('Unhold');
				},

				onRing: function(callId, headers) {
					//console.log('onRing ' + callId);
					//console.log(headers);

					window.candybar.setState('calling');
					startTone("ringback-uk");
				},

				onJoin: function(callId, jid, mixer) {
					//console.log('onJoin ' + jid + " " + mixer + " " + callId);

					window.candybar.setState('conferenced');
					window.dialer.setCallLabel('Leave');
				},

				onUnjoin: function(callId, jid, mixer) {
					//console.log('onUnjoin ' + jid + " " + mixer + " " + callId);
				},

				onMute: function(callId) {
					//console.log('onMute ' + callId);

					window.candybar.setState('muted');
					window.dialer.setCallLabel('Unmute');
				},

				offMute: function(callId) {
					//console.log('offMute ' + callId);

					window.candybar.setState('active');
					window.dialer.setCallLabel('Hangup');
				},

				onPrivate: function(callId) {
					//console.log('onPrivate ' + callId);

					window.candybar.call.privateCall = true;
					window.dialer.setCallLabel('Public');
				},

				offPrivate: function(callId) {
					//console.log('offPrivate ' + callId);

					window.candybar.call.privateCall = false;
					window.dialer.setCallLabel('Hangup');
				},

				onRedirect: function(callId) {
					//console.log('onRedirect ' + callId);

					window.candybar.endGently();
					window.dialer.setCallLabel('Call');
					stopTone();
				},

				onRedirecting: function(callId) {
					console.log('onRedirecting ' + callId);
				},

				onRedirected: function(callId) {
					//console.log('onRedirected ' + callId);
				},

				onSay: function(saying) {
					//console.log('Started saying ' + saying.sayId);

					window.candybar.call.saying = saying;
				},

				onSayComplete: function(sayId) {
					console.log('Finished saying ' + sayId);

					window.candybar.call.saying = null;
				},

				onError: function(e) {

					console.error(e);
				}
			});
		}
   }

   function makeCall(destination)
   {
		//console.log("makeCall " + destination);

		var sipUri = prefix + destination + "@" + domain
		var groupname = "family";

		if (prefix == "sip:") sipUri = prefix + destination + "@" + domain
		if (prefix == "tel:") sipUri = prefix + destination

		if (prefix == "xmpp:")
		{
			sipUri = prefix + destination + "@" + domain + "/" + destination;
		}

		if (!username) groupname = null;

		if (sipHandset && sipHandset.indexOf("rtmfp:") == 0)
		{
			tokens = sipHandset.split(":")
			rtmpIframe = document.getElementById("rtmpIframeDIV");
			rtmpIframe.src = window.location.protocol + '//' + window.location.host + '/rayo-phone/confphone.swf?rtmpUrl=rtmfp://' + window.location.hostname + '&recieverStream=' + tokens[2] + '&senderStream=' + tokens[1];
		}

		window.connection.rayo.dial("xmpp:" + window.connection.jid, sipUri, {
			codec_name: document.getElementById("codec").value,
			//group_name: groupname
		});

		window.candybar.setUser({
			name: destination,
			number: destination,
			picUrl: 'unknown.jpg'
		});
    }

    function urlParam(name)
    {
		var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
		if (!results) { return undefined; }
		return decodeURIComponent(results[1]) || undefined;
    }

    function startTone(name)
    {
    	if (!ringtone)
    	{
			ringtone = new Audio();
			ringtone.loop = true;
			ringtone.src = "ringtones/" + name + ".mp3";
			ringtone.play();
		}
    }

    function stopTone()
    {
    	if (ringtone)
    	{
			ringtone.pause();
			ringtone = null;
		}
    }

    </script>
  </head>
  <body style="position: absolute; width: 500px: height: 300px;">
    <div>Codec<select id="codec"><option value="OPUS"><b>OPUS</b></option><option value="PCMU"><b>PCMU (Ulaw)</b></option></select></div>
    <span id="status">Loading...</span>
    <iframe id="rtmpIframeDIV" style="width:1px;height:1px;"></iframe>
  </body>
</html>